<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Fingerjs</title>
    <style>

    div{ width: 80%; height: 100px; background-color: #123; margin-bottom: 10px; color: #fff; font-size: 20px;}
    </style>
</head>
<body>
    <div id="tap"> Tap </div>
    <div id="longtap">Longtap </div>
    <div id="swipe">Swipe</div>
    <div id="drag">Drag</div>
</body>
</html>
<script src="src/fingerJS.js"></script>
<script>
    window.onload = function() {
        var tapCount = 0;
        fingerjs.on('#tap','tap',function(e) {
            this.innerHTML = tapCount++;
        });

        fingerjs.on('#longtap','longtap',function(e) {
            this.innerHTML = 'you did longtap';
        });

        fingerjs.on('#swipe','swipe',function(e) {
            this.innerHTML = e.type;
        });

        fingerjs.on("#drag",'drag',function(e) {
            this.innerHTML =  "x :" + e.offset.x + " -- y :"+ e.offset.y ;
        });

    }
</script>
